<div class="container-fluid">
    <div class="row">
        <img class="img-responsive" src='assets/image/webbanner.jpg'>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card-box card-box-mb">
                <div class="card-header">
                    <h4 class="card-title">黄金资讯</h4>
                    <div class="card-operate">
                        更多
                    </div>
                </div>
                <div class="card-content">
                    <div class="news" *ngIf="goldList.length > 0">
                        <div class="news-list">
                            <div class="news-item">
                                <div class="news-img">
                                    <img class="img-responsive" [src]="goldList[0].IconUrl">
                                </div>
                                <div class="news-content">
                                    <a class="news-title" [routerLink]="['/index/news', goldList[0]?.Id]">
                                        {{goldList[0]?.Title}}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <ul class="list-unstyled artcle-list">
                            <li *ngFor="let item of goldList" class="artcle-item">
                                <a [routerLink]="['/index/news', item.Id]">{{item.Title}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-box card-box-mb">
                <div class="card-header">
                    <h4 class="card-title">财经日历</h4>
                </div>
                <div class="card-content calendar-list">
                    <dl class="dl-horizontal" *ngFor="let item of eventList">
                        <dt>{{item.Description}}</dt>
                        <dd>{{item.Time}}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card-box card-box-mb">
                <div class="card-header">
                    <h4 class="card-title">股票市场</h4>
                    <div class="card-operate">
                        更多
                    </div>
                </div>
                <div class="card-content">
                    <div class="news" *ngIf="stockList.length > 0">
                        <div class="news-list">
                            <div class="news-item">
                                <div class="news-img">
                                    <img class="img-responsive" [src]="stockList[0].IconUrl">
                                </div>
                                <div class="news-content">
                                    <a class="news-title" [routerLink]="['/index/news', stockList[0]?.Id]">
                                        {{stockList[0]?.Title}}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <ul class="list-unstyled artcle-list">
                            <li *ngFor="let item of stockList" class="artcle-item">
                                <a [routerLink]="['/index/news', item.Id]">{{item.Title}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-box card-box-mb">
                <div class="card-header">
                    <h4 class="card-title">行情中心</h4>
                </div>
                <div class="card-content calendar-list">
                    <table class="table tabel-no-border">
                        <thead>
                            <tr>
                                <td>商品名称</td>
                                <td>最新价</td>
                                <td>涨跌幅</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>同花顺</td>
                                <td class="td-add">111.1</td>
                                <td class="td-add">-2.5%</td>
                            </tr>
                            <tr>
                                <td>同花顺</td>
                                <td class="td-mutil">111.1</td>
                                <td class="td-mutil">-2.5%</td>
                            </tr>
                            <tr>
                                <td>同花顺</td>
                                <td class="td-add">111.1</td>
                                <td class="td-add">-2.5%</td>
                            </tr>
                            <tr>
                                <td>同花顺</td>
                                <td class="td-add">111.1</td>
                                <td class="td-add">-2.5%</td>
                            </tr>
                            <tr>
                                <td>同花顺</td>
                                <td class="td-mutil">111.1</td>
                                <td class="td-mutil">-2.5%</td>
                            </tr>
                            <tr>
                                <td>同花顺</td>
                                <td class="td-add">111.1</td>
                                <td class="td-add">-2.5%</td>
                            </tr>
                            <tr>
                                <td>同花顺</td>
                                <td class="td-add">111.1</td>
                                <td class="td-add">-2.5%</td>
                            </tr>
                            <tr>
                                <td>同花顺</td>
                                <td class="td-mutil">111.1</td>
                                <td class="td-mutil">-2.5%</td>
                            </tr>
                            <tr>
                                <td>同花顺</td>
                                <td class="td-add">111.1</td>
                                <td class="td-add">-2.5%</td>
                            </tr>
                            <tr>
                                <td>同花顺</td>
                                <td class="td-add">111.1</td>
                                <td class="td-add">-2.5%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card-box card-box-mb">
                <div class="card-header">
                    <h4 class="card-title">外汇信息</h4>
                    <div class="card-operate">
                        更多
                    </div>
                </div>
                <div class="card-content">
                    <div class="news" *ngIf="forexList.length > 0">
                        <div class="news-list">
                            <div class="news-item">
                                <div class="news-img">
                                    <img class="img-responsive" [src]="forexList[0].IconUrl">
                                </div>
                                <div class="news-content">
                                    <a class="news-title" [routerLink]="['/index/news', forexList[0]?.Id]">
                                        {{forexList[0]?.Title}}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <ul class="list-unstyled artcle-list">
                            <li *ngFor="let item of forexList" class="artcle-item">
                                <a [routerLink]="['/index/news', item.Id]">{{item.Title}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-box card-box-mb">
                <div class="card-header">
                    <h4 class="card-title">智能选股</h4>
                </div>
                <div class="card-content">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="stock">
                                <div class="stock-title">
                                    MACD底背线
                                </div>
                                <div class="stock-content">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptatum possimus hic omnis in aperiam quis mollitia vero vitae nam porro, labore at, et optio error temporibus beatae, facere aliquam?
                                </div>
                                <p class="stock-total">共选出 8 只股票</p>
                                <div class="stock-bottom">
                                    <a class="stock-href">详情</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="stock">
                                <div class="stock-title">
                                    MACD底背线
                                </div>
                                <div class="stock-content">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptatum possimus hic omnis in aperiam quis mollitia vero vitae nam porro, labore at, et optio error temporibus beatae, facere aliquam?
                                </div>
                                <p class="stock-total">共选出 8 只股票</p>
                                <div class="stock-bottom">
                                    <a class="stock-href">详情</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="stock">
                                <div class="stock-title stock-title-error">
                                    MACD底背线
                                </div>
                                <div class="stock-content">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptatum possimus hic omnis in aperiam quis mollitia vero vitae nam porro, labore at, et optio error temporibus beatae, facere aliquam?
                                </div>
                                <p class="stock-total">共选出 8 只股票</p>
                                <div class="stock-bottom">
                                    <a class="stock-href">详情</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="stock">
                                <div class="stock-title stock-title-error">
                                    MACD底背线
                                </div>
                                <div class="stock-content">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptatum possimus hic omnis in aperiam quis mollitia vero vitae nam porro, labore at, et optio error temporibus beatae, facere aliquam?
                                </div>
                                <p class="stock-total">共选出 8 只股票</p>
                                <div class="stock-bottom">
                                    <a class="stock-href">详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>